<template>
  <div id="front-page">
    <div class="row flex">
      <icon-card @click="new_project_modal=true">
        <template #icon>
          <svg
            t="1589124956241"
            class="icon selected"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2720"
            width="22"
            height="22"
          >
            <path
              d="M640 288 640 64 192 64C121.344 64 64 121.344 64 192l0 704c0 70.656 57.344 128 128 128l576 
                0c70.656 0 128-57.344 128-128L896 320l-224 0C654.336 
                320 640 305.664 640 288zM704 544C704 561.664 689.664 
                576 672 576L512 576l0 160C512 753.664 497.664 768 480 
                768S448 753.664 448 736L448 576 288 576C270.336 576 256 
                561.664 256 544S270.336 512 288 512L448 512 448 352C448 
                334.336 462.336 320 480 320S512 334.336 512 352L512 512l160 
                0C689.664 512 704 526.336 704 544zM704 64l0 192 192 0L704 64z"
              p-id="2721"
              data-spm-anchor-id="a313x.7781069.0.i5"
            />
          </svg>
        </template>
        <template #icon-description>新建项目</template>
      </icon-card>
    </div>
    <div class="row mt-20 history-row">
      <history-card class="history-card"></history-card>
    </div>
    <CreateProjectModal @close="close" :visible="new_project_modal" />
  </div>
</template>

<script>
import IconCard from "./components/IconCard";
import HistoryCard from "./components/HistoryCard";
import CreateProjectModal from "./components/CreateProjectModal";

export default {
  name: "index",
  components: {
    IconCard,
    CreateProjectModal,
    HistoryCard
  },
  data() {
    return {
      new_project_modal: false
    };
  },
  methods: {
    projectModal() {
      console.log(22);
    },
    close() {
      console.log("close");
      this.new_project_modal = false;
    }
  }
};
</script>

<style scoped>
#front-page {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.history-row {
  height: 100%;
  display: flex;
  flex-direction: column;
  height: calc(100% - 150px);

}

.history-card {
  box-sizing: border-box;
  height: 100%;
  /* height: calc(100% - 150px); */
  display: flex;
  flex-direction: column;
}

.row >>> .icon-card:not(:last-child){
  margin-right: 20px;
}
</style>
